<template>
  <div class="activity-page">
    <van-nav-bar fixed :title="activeName" />
    <van-tabs sticky v-model:active="active" offset-top="45px" @click-tab="onClickTab">
      <van-tab title="活动">
        <activity-list v-if="cont == 0"></activity-list>
      </van-tab>
      <van-tab title="优惠券">
        <coupon-list v-if="cont == 1"></coupon-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import ActivityList from './activityList.vue'
import CouponList from './couponList.vue'
const activeName = ref('活动专区')
const active = ref(0);
const cont = ref(0)
const onClickTab = ({ title }) => {
  console.log('打印：', title);
  if (title === "活动") {
    activeName.value = '活动专区'
    cont.value = 0
  } else {
    activeName.value = '优惠券专区'
    cont.value = 1
  }
}
</script>

<style lang="scss" scoped>
// .activity-page {
//   width: 375px;
//   height: 100%;
// }

:deep(.van-tabs__content) {
  min-height: 80vh;
  background-color: #f5f5f5;
  padding: 55px 15px;
}

:deep(.van-tab__panel) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  &>div{
    width: 100%;
  }
}
</style>
